<template>
    
    <!-- 组件的模板 -->
    <div class="page send-notice">
        <form>
            <div class="yfnotice-title com-border-bottom">
                <p class="title">公告标题</p>
                <input type="text" name="" maxlength="20" v-model.trim="adObj.title" :value="adObj.title" placeholder="请填写">
            </div>
            <div class="textarea-div">
                <textarea 
                    class="textarea" 
                    onfocus="window.activeobj=this;this.clock=setInterval(function(){activeobj.style.height=activeobj.scrollHeight+'px';},200);" 
                    onblur="clearInterval(this.clock);"
                    v-model="adObj.desc"
                    maxlength="2000" 
                    placeholder="请输入公告内容（不超2000字）" 
                >
                </textarea>
                <div class="weui-textarea-counter"><span>{{adObj.desc.length}}</span>/2000</div>
            </div>
            <div class="upload-pic com-border-top com-border-bottom">
                <h2>上传图片</h2>
                <ul class="pic-list">
                    <li v-for="item in imgArray"><img :src="item" alt="" @click.prevent="showBigImg($index)"></li>
                </ul>
                <div class="uploader"><div><input @click.prevent="selectAndUploadImage" type="" readonly name=""></div></div>
            </div> 
            <div class="weui-cells">
                <!-- <a class="weui-cell weui-cell_access" href="javascript:;" @click="gotoMemberList">
                    <div class="weui-cell__bd">
                        <p>通知人员选择</p> 
                    </div>
                    <div class="weui-cell__ft">{{length}}</div>
                </a> -->
                <div class="weui-cell weui-cell_switch">
                    <div class="weui-cell__bd">需要阅读后回复确认</div>
                    <div class="weui-cell__ft">
                        <input class="weui-switch" type="checkbox" v-model="isResut">
                    </div>
                </div>
            </div>
        </form>        
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import widget from 'gapi/widget'
    import clientUi from 'gapi/clientUi'
    import cache from 'gapi/cache.js'
    import * as util from 'js/util.js'
    import commonPage from 'clientApi/commonPage.js'
    import KCApiApp from 'clientApi/KCApiApp.js'
    // commonPage.canPullWebView(true)
    // window.loadData = () => {
    //     location.reload()
    //     commonPage.dataDownloadFinished()
    // }
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */
    // import Imageview from 'components/Imageview/Imageview'
    let user_list_ids = []
    /**
     *  组件实例对象
     */
    export default {
        components: {
            // Imageview
        },
        data: function(){
            return{
                noMoreClick:true,
                base:{
                    teamid:'',
                    projectid:'',
                    userid:''
                },
                adObj:{
                    title:'',
                    desc:'',
                    group_list:'',
                    user_list:'',
                    is_receipt:'',
                    img_url:''
                },
                imgArray: [],
                imgArray_edit:[],
                image_big:[],
                length:'',
                isResut: 0
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                
                let teamid = util.getUrddataString('teamId')
                let projectid = util.getUrddataString('projectId')
                let userid = util.getUrddataString('userId')
                this.base.teamid = teamid;
                this.base.projectid = projectid;
                this.base.userid = userid;
                let param = {
                    team_id:teamid,
                    project_id:projectid
                }
                cache.setCache('KqCacheMessge', param, 86400*7)
                window.doSubmit = () => {
                    this.submit()
                }
                commonPage.getWebViewID((data)=>{
                    cache.setMemoryCache('webViewID',{'webViewID':data})
                })
                window.loadData =(data) => {
                    // alert(JSON.stringify(data))
                    user_list_ids['']
                    this.length = '已通知'+data.value.length+'人'
                    data.value.forEach( (item) => {
                        user_list_ids.push(item)
                    })
                    
                }

                //解决android低端机键盘缩起webview上方留白问题
                $('body').on('click',function(){
                    if(util.OS()=='android'){
                        window.scroll(0,0);
                    }
                })
            },
            submit (){
                let is_receipt = this.isResut ? 1 : 0   //是否需要回执0-否1-是
                if(this.isResut == 0){
                    //埋点
                    let statisticsLog_data = {
                        event_id: '发公告-不需要回复确认',
                        // event_label: data.event_label,(预留，现在不用传此参数)
                        event_param: {
                            ca_from: 'noneedconfirm',
                            project_id: this.base.projectid,
                        }
                    }
                    // alert(JSON.stringify(statisticsLog_data))
                    KCApiApp.statisticsLog(statisticsLog_data)
                }else{
                    //埋点
                    let statisticsLog_data = {
                        event_id: '发公告-需要回复确认',
                        // event_label: data.event_label,(预留，现在不用传此参数)
                        event_param: {
                            ca_from: 'needconfirm',
                            project_id: this.base.projectid,
                        }
                    }
                    // alert(JSON.stringify(statisticsLog_data))
                    KCApiApp.statisticsLog(statisticsLog_data)
                }
                if(!this.adObj.title){
                    widget.toast('请填写公告标题')
                    return
                }
                if(!this.adObj.desc){
                    widget.toast('请填写公告详情')
                    return
                }
                if(this.adObj.desc.length > 2000){
                    widget.toast('文本内容不超过2000字')
                    return
                }
                // if(user_list_ids == ''){
                //     widget.toast('请选择通知人员')
                //     return
                // }
                let edit_arr = []
                this.imgArray.forEach( (item) => {
                    edit_arr.push(item.replace(util.baseImageDomain,''))
                })
                console.log(edit_arr)
                let data = {
                    team_id : this.base.teamid,
                    project_id : this.base.projectid,
                    title : this.adObj.title,
                    desc:this.adObj.desc,
                    // user_list:'['+user_list_ids+']',
                    is_receipt: is_receipt,
                    img_url: JSON.stringify(edit_arr)
                }
                console.log(data)
                commonPage.loadPageStatus('loading')
                if(this.noMoreClick){
                    this.noMoreClick = false
                    util.ajax({
                        url:'/notice',
                        type:'POST',
                        data:data,
                        timeout:10000,
                        success:(obj) => {
                            console.log(obj)
                            if(obj.errno == 0){
                                //埋点
                                let statisticsLog_data = {
                                    event_id: '发公告-提交',
                                    // event_label: data.event_label,(预留，现在不用传此参数)
                                    event_param: {
                                        ca_from: 'submit',
                                        project_id: this.base.projectid,
                                    }
                                }
                                // alert(JSON.stringify(statisticsLog_data))
                                KCApiApp.statisticsLog(statisticsLog_data)

                                widget.toast('发布成功')
                                commonPage.goBack(1,{'key':1})
                            }else{
                                widget.toast(obj.errmsg)
                            }
                            this.noMoreClick = true
                            commonPage.loadPageStatus('loadSuccess')
                        },
                        error: (xhr, status) => {
                            this.noMoreClick = true
                            commonPage.loadPageStatus('loadSuccess')
                            widget.toast('服务器异常')
                        },
                        noNetwork: () => {
                            // 无网络的回调
                            this.noMoreClick = true
                            commonPage.loadPageStatus('loadSuccess')
                            widget.toast('网络连接失败，请检查网络')
                        }
                    })
                }
            },
            /*跳转到人员列表页*/
            gotoMemberList (){
                location.href = `dmsaas://KaoqinAddMember`
            },
            selectAndUploadImage (){
                let isEdit = 0;   //isEdit 为 0 不可裁剪，为 1 可裁剪
                if(this.imgArray.length < 5){
                    clientUi.selectAndUploadImage((data) => {
                        console.log(JSON.stringify(data)) 
                        if(data.status == '1'){
                            //埋点
                            let statisticsLog_data = {
                                event_id: '发公告-上传图片',
                                // event_label: data.event_label,(预留，现在不用传此参数)
                                event_param: {
                                    ca_from: 'uploadpic',
                                    project_id: this.base.projectid,
                                }
                            }
                            // alert(JSON.stringify(statisticsLog_data))
                            KCApiApp.statisticsLog(statisticsLog_data)

                            this.imgArray.push(util.baseImageDomain + data.imageURL)
                            // this.imgArray_edit.push(data.imageURL)
                        }
                        
                        // this.image_big.push(util.baseImageDomain + data.imageURL)
                    }, isEdit)
                }else{
                    widget.toast('最多可上传5张')
                }
                
            },
            /*查看大图并删除*/
            showBigImg (index){
                let title = '';
                let imgs = this.imgArray;
                clientUi.pictureOperationDialog(title, imgs, index, () => {
                    // 当用户点击"删除"按钮的时候会回调执行该函数
                   imgs.splice(index,1);
                   console.log(imgs)
                })
            }
        },
        created(){

            this.init();

             /*设置Native的头部*/
            commonPage.updateTitleBar({
                // backAction: 'checkChange',    // 点击返回按钮的动作（即回调函数名称）
                // leftDisplay: true,            // 是否显示左按钮
                // leftText: '我',                // 左按钮文案
                // leftAction: 'checkChange',    // 点击左按钮的动作（即回调函数名称）
                rightDisplay: true,            // 是否显示右按钮
                rightText: '提交',            // 右按钮文案
                rightAction: 'doSubmit'    // 点击右按钮的文案（即回调函数名称）
            })
            
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/notice.css"></style>
<style>
html, body{
    height: 100%;
    overflow: scroll;
}
.textarea-div{
    position: relative;
    padding: 12px 0 12px 0;
    background:#fff;
}
.weui-textarea-counter{
    position: absolute;
    right: 3px;
    bottom: 2px;
}
.textarea{
    width:94%;
    min-height: 130px;
    font-size:16px;
    background:#fff;
    padding: 0 3%;
    overflow:scroll;
    overflow-y:hidden;
    overflow-x:hidden;
    border: none;
    line-height: 24px;
}
.yfnotice-title{
    background: #fff;
    height: 48px;
    line-height: 48px;
    padding: 0 12px;
    overflow: hidden;    
}
.yfnotice-title .title {
    font-size: 16px;
    margin-right: 18px;
    color: #999;
    display:inline-block;
}
.yfnotice-title input {
    max-width: 15rem;
    border: none;
    font-size: 16px;
    flex-shrink:0;
}
.yfnotice-title::after {
    left: 12px;
}
</style>



